<template>
    <div id="guide">
        <div>
        <div class="contentimg">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <van-image :src="require('../assets/img/banner/1.jpg')" style="width: 100%;height:550px" />
                </van-swipe-item>
                <van-swipe-item>
                    <van-image :src="require('../assets/img/banner/2.jpg')" style="width: 100%;height:550px" />
                </van-swipe-item> 
                <van-swipe-item>
                    <van-image :src="require('../assets/img/banner/3.jpg')" style="width: 100%;height:550px" />
                </van-swipe-item>
                <van-swipe-item>
                    <van-image :src="require('../assets/img/banner/4.jpg')" style="width: 100%;height:550px" />
                </van-swipe-item>
              </van-swipe>
        </div>
        <div class="log">
            <van-row>
                <van-col span="14">
                    <h3>欢迎贵宾光临喜茶</h3>
                    <span style="font-size:5px;color:rgb(103, 103, 103);">登录可领取阿喜贵宾卡，激活贵宾特权</span>
                </van-col>
                <van-col span="10"><van-button  @click="gologin" class="button1">⽴即登录</van-button>
                </van-col>
              </van-row> 
        </div>
        <div class="classfly">
            <van-row>
                <van-col span="8" offset="4">
                    <h4>门店自取</h4>
                    <span style="font-size:5px">提前下单免排队</span>
                </van-col>
                <van-col span="1">
                    <span class="line1" style="color:rgb(204, 155, 110);">|</span>
                </van-col>
                <van-col span="8">
                    <h4>喜外送</h4>
                    <span style="font-size:5px">送喜到家更安心</span>
                </van-col>
              </van-row>
        </div>
       
        
        </div>
    </div>
</template>
<script>
export default {
    name:'Guide.vue',
    methods: {
        gologin:function(){
            this.$router.push("/login")
        }
         }
}
</script>

<style scoped>
.contentimg{
    margin-top: 0px;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    z-index: -1;
  }
.log{
    position: absolute;
    width: 96%;
    padding: 10px 0px;
    margin-top: -60px;
    margin-left: 15px;
    background-color: rgb(249, 249, 249);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.log h3{
    margin: 4px 0px;
}
.button1{
    width: 80%;
    height: 40px;
    margin-top: 4px;
    background-color: rgb(0, 0, 0);
    color: aliceblue;
    font-size: medium;
}
.classfly{
    width: 96%;
    margin-left: 15px;
    margin-top: 20px;
    padding: 10px 0  10px 0;
    background-color:rgb(240, 236, 230);
}
.classfly h4{
    margin: 2px;
}
.van-col--1{
    margin-top: 22px;
}
.line2{
    margin-top: 10px;
}
.logo{
    margin-top: 10px;
    position:relative; 
    bottom:0;
}
</style>
